<!-- 账单信息 -->
<template>
  <el-table :data="tableList.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)" border class="table" :reserve-selection="true" v-if="tableList.length > 0">
    <el-table-column type="index" align="center"> </el-table-column>
    <el-table-column prop="out_bill_no" label="商户订单号" align="center"> </el-table-column>
    <el-table-column prop="title" label="期数" align="center"> </el-table-column>
    <el-table-column prop="bill_type_name" label="账单类型" align="center"> </el-table-column>
    <el-table-column prop="price" label="每期金额" align="center"> </el-table-column>
    <el-table-column prop="staging_time" label="预计扣款日" align="center" :formatter="(row: IRentBill) => handleVerifyFormatYMDDate(row.staging_time)"> </el-table-column>
    <el-table-column prop="is_pay" label="是否已支付" align="center"
      ><template #default="scope">
        <div class="w-tag">
          <el-tag :type="scope.row.is_pay === 1 ? 'success' : scope.row.is_pay === 0 ? 'danger' : 'info'">{{ scope.row.is_pay == 0 ? "未支付" : scope.row.is_pay == 1 ? "已支付" : "未知情况，联系管理员" }}</el-tag>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="pay_time" label="支付时间" align="center" :formatter="(row: IRentBill) => handleVerifyFormatDate(row.pay_time)"> </el-table-column>
    <el-table-column prop="pay_source_name" label="支付来源" align="center"> </el-table-column>
    <el-table-column prop="tradeLog.type_name" label="支付方式" align="center"> </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination background @update:current-page="handleCurrentChange" @update:page-size="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :page-size="pageSize" :current-page="pageNumber" :page-sizes="[10, 20]" :total="total" :hide-on-single-page="true">
    </el-pagination>
  </div>
</template>

<script setup lang="ts">
import { handleVerifyFormatYMDDate, handleVerifyFormatDate } from "@/utils/utils";
import type { IRentBill } from "@/types/rentMachineManage/rentMachineOrderInfo";

interface Props {
  tableList: IRentBill[];
}
const { tableList } = defineProps<Props>();

const pageNumber = ref(1);
const pageSize = ref(10);
const total = computed(() => {
  return tableList.length;
});
watch(
  () => tableList.length,
  (length: number) => {
    if (length == 0) {
      handleInitData();
    }
  }
);
/* 初始化数据 */
function handleInitData() {
  pageNumber.value = 1;
  pageSize.value = 10;
}

/* 显示第几页 */
function handleCurrentChange(val: number) {
  pageNumber.value = val;
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  pageSize.value = val;
}
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-col {
  border-radius: 4px;
}
</style>
